<template>
  <ConfigProvider v-bind="themeConfig">
    <template #renderEmpty>
      <div class="flex flex-col items-center">
        <SvgIcon name="empty" class="w-14 h-14" />
        <span>暂无数据</span>
      </div>
    </template>
    <RouterView />
  </ConfigProvider>
  <audio ref="audioRef" :src="didi"></audio>
</template>

<script setup lang="ts">
import { provide, useTemplateRef } from 'vue';
import didi from '@/assets/audio/didi.mp3';
import { ConfigProvider, type ConfigProviderProps } from 'ant-design-vue';
import zhCN from 'ant-design-vue/locale/zh_CN';
import { RouterView } from 'vue-router';
import SvgIcon from '@/components/SvgIcons/Index.vue';
import { audioRefKey } from './constant/injectKey';
import { useUpdateFrontend } from './hooks/useUpdateFrontend';

useUpdateFrontend();

const audioRef = useTemplateRef('audioRef');

provide(audioRefKey, audioRef);

const themeConfig: ConfigProviderProps = {
  componentSize: 'middle',
  wave: {
    disabled: true,
  },
  locale: zhCN,
  theme: {
    // algorithm: [theme.compactAlgorithm],
    token: {
      // wireframe: false,
      borderRadius: 2,
      colorText: '#fff',
      colorBorder: '#dcdfe6',
      colorBgBase: 'transparent', // 整体背景色
      colorBgContainer: 'rgba(0,0,0,0.48)',
      colorTextPlaceholder: '#7C8187',
      colorTextDisabled: '#d5d5d5',
      controlItemBgActive: '#00000044',
      colorTextDescription: '#fff',
      colorTextQuaternary: '#fff',
      // colorBgElevated: 'transparent', // select 下拉浮层背景色
      controlOutline: 'transparent',
      boxShadowSecondary: '0px 6px 20px 0px rgb(15, 17, 22, 0.8)',
      controlItemBgHover: '#00000044',
      colorBgContainerDisabled: '#00000024',
      colorPrimary: 'rgba(0,0,0,0.48)',
      colorPrimaryHover: '#badeff',
      colorPrimaryActive: '#69b1ff',
      colorIcon: '#fff',
    },
    components: {
      Layout: {
        colorBgHeader: 'transparent', // layout
        // colorBgBody: 'linear-gradient(180deg, #242e3f 0%, #232532 100%)',
        colorBgBody: 'transparent',
      },
      Button: {
        colorText: '#fff',
        colorLink: '#fff',
        colorPrimary: '#de4d4f', //'rgba(0,0,0,0.48)',
      },
      Menu: {
        // colorItemBg: '#3883FA',
        colorItemBg: 'transparent',
        colorItemText: 'rgba(255,255,255, 0.7)',
        colorItemTextHover: 'rgba(255,255,255, 0.7)',
        colorItemTextSelected: '#fff',
        // colorItemBgSelected: '#464D5B',
        itemMarginInline: 18,
        controlHeightLG: 48,
      },
      Table: {
        paddingContentVerticalLG: 9, // 列表单行高度  (n - 22 ) /2
        fontSize: 14, // 字体大小
        lineHeight: 1, // 文字行高 会影响列表单行高度
        colorBgContainer: '#0000003d',
        colorBorderSecondary: '#f2f2f233',
        colorFillAlter: '#0000003d',
      },
      Pagination: {
        colorPrimary: '#fff',
      },
      Switch: {
        colorTextQuaternary: '#C9CDD4',
      },
      Form: {
        colorTextHeading: '#fff',
      },
      Card: {
        // colorBgBase: '#f00',
        // colorBgContainer: 'transparent',
        colorBorderSecondary: '#929599',
      },
      Notification: {
        colorBgBase: '#4F5F79',
      },

      Modal: {
        colorBgElevated: 'transparent',
      },
      Select: {
        colorIcon: '#fff',
        colorSplit: 'rgba(255, 255, 255, 0.3)',
        colorFillSecondary: '##4DAEDE',
      },
      Tabs: {
        colorPrimaryActive: '#fff',
        colorPrimary: '#fff',
      },
      Checkbox: {
        colorPrimary: '#4daede',
        colorPrimaryHover: '#4daede',
        colorTextDisabled: '#fff',
      },
      DatePicker: {
        colorSplit: 'rgba(255, 255, 255, 0.3)',
        colorIcon: '#fff',
        colorBgElevated: 'transparent',
      },
      Steps: {
        colorSplit: '#bbb',
        colorPrimary: '#fff',
      },
      Radio: {
        colorPrimary: '#4daede',
        colorPrimaryHover: '#4daede',
        colorTextDisabled: '#fff',
      },
      Tree: {
        colorBgContainer: 'transparent',
      },
      TreeSelect: {
        colorBgElevated: 'transparent',
      },
      Popover: {
        colorBgElevated: 'rgb(55 55 55 / 100%)',
      },
      Dropdown: {
        colorBgElevated: 'rgb(55 55 55 / 100%)',
      },
    },
  },
};
</script>
